<!--  -->
<template>
  <view class="main-body">
    <view v-if="video_list.length > 0">
      <view class="followNum" v-if="props.title">
        {{ props.title }}({{ video_list.length }})
      </view>
      <view>
        <view class="grid grid-item-3">
          <view
            class="list-box"
            v-for="(item, index) in video_list"
            :key="index"
            @click="goDetail(item)"
          >
            <view class="list-img">
              <image :src="item.frameUrl" mode="aspectFill"></image>
            </view>
            <view class="list-like flexRow aCenter">
              <image
                src="../../static/image/like.png"
                mode="aspectFill"
              ></image>
              <view>{{ formatNumber(item.praiseCount) }}</view>
            </view>
          </view>
        </view>
        <fui-loadmore
          :state="props.state"
          :initText="t('common.pullUpLoading')"
          :text="t('common.loading')"
          :noneText="t('common.noMoreData')"
        ></fui-loadmore>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

// 定义i18n
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: () => [],
  },
  state: {
    type: Number,
    default: 1,
  },
});
watch(
  () => props.list,
  (newVal) => {
    console.log('watch video_list', newVal)
    video_list.value = newVal;
  }
);
const video_list = ref<Array<any>>(props.list);
const emits = defineEmits(["change"]);
const goDetail = (item: Object) => {
  console.log(item);
  emits("change", item);
};
const formatNumber = (num?: any) => {
  if (num < 1000) {
    return num;
  } else if (num < 1000000) {
    return (num / 1000).toFixed(1) + "K";
  } else {
    return (num / 1000000).toFixed(2) + "M";
  }
};
</script>
<style scoped lang="scss">
.main-body {
  width: 100%;
  margin: 0 auto;
  .followNum {
    color: #a6a6a6;

    font-size: 28rpx;
  }
  .list-box {
    width: 95%;
    margin: 5rpx auto;
    position: relative;
    .list-img {
      width: 100%;
      height: 330rpx;
      position: relative;
      image {
        width: 100%;
        height: 100%;
        border-radius: 15rpx;
        position: absolute;
      }
    }

    .list-like {
      color: #fff;
      position: absolute;
      z-index: 1;
      left: 15rpx;
      bottom: 10rpx;
      font-size: 24rpx;
      image {
        width: 35rpx;
        height: 35rpx;
        margin-right: 10rpx;
      }
    }
  }
}
.noData {
  text-align: center;
  margin: 25rpx auto;
  font-size: 32rpx;
}
</style>
